<template>

    <div class="grid grid-cols-[auto_1fr] h-screen overflow-hidden">
        <Sidebar :sidebarOpen="sidebarOpen" @close-sidebar="sidebarOpen = false" />
        <!-- 主内容区域 -->
        <div class="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
            <!-- Site header -->
            <Header :sidebarOpen="sidebarOpen" @toggle-sidebar="sidebarOpen = !sidebarOpen" variant="v2" />
            <!-- px-4: 水平内边距, sm:px-6 lg:px-8: 响应式水平内边距 -->
            <div class="px-4 sm:px-6 lg:px-8">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Sidebar from '../partials/Sidebar.vue'
import Header from '../partials/Header.vue'
import { ref } from 'vue'


const sidebarOpen = ref(false)


</script>

<style scoped></style>